<template>
  <!-- 单据编码规则维护-->
  <div class="app-container">
    <div v-show="tableVisable">
      <div class="page-head"
           ref="pageHead">
        <div class="head-title"></div>
        <!-- 搜索表单 -->
        <div class="head-search">
          <el-form ref="listQueryRef"
                   class="search-form"
                   :model="listQuery"
                   label-width="120px">
            <!-- 搜索框的第一排 -->
            <el-row>
              <el-col :span="6">
                <el-form-item label="单据前缀代码"
                              prop="documentPrefixCode">
                  <el-select v-model="listQuery.documentPrefixCode"
                             clearable
                             filterable
                             placeholder="关键字搜索">
                    <el-option v-for="item in conditionList"
                               :key="item.documentPrefixCode"
                               :label="item.documentPrefixCode"
                               :value="item.documentPrefixCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单据编码代码"
                              prop="documentCode">
                  <el-select v-model="listQuery.documentCode"
                             clearable
                             filterable
                             placeholder="关键字搜索">
                    <el-option v-for="item in conditionList"
                               :key="item.documentCode"
                               :label="item.documentCode"
                               :value="item.documentCode">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单据名称"
                              prop="documentName">
                  <el-select v-model="listQuery.documentName"
                             clearable
                             filterable
                             placeholder="关键字搜索">
                    <el-option v-for="item in conditionList"
                               :key="item.documentName"
                               :label="item.documentName"
                               :value="item.documentName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <div class="searchData">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList()">查询</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetDataList()">重置</el-button>
                  </div>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
      </div>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="addOrUpdateHandle()"
            v-hasPermi="['system:documentrule:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="editCopy()"
            v-hasPermi="['system:documentrule:add']"
          >复制</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="editSelect()"
            v-hasPermi="['system:documentrule:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            @click="deleteHandle()"
            v-hasPermi="['system:documentrule:remove']"
          >删除</el-button>
        </el-col>
      </el-row>



        <!-- 表格 -->
        <div class="table-container table-fullscreen">

          <el-table v-model="isShowTable"
                    ref="table"
                    :data="dataList"
                    border
                    height="500"
                    v-loading="dataListLoading"
                    @selection-change="selectionChangeHandle"
                    :cell-style="{ padding: 4 + 'px' }"
                    style="width: 100%;">
            <el-table-column type="selection"
                             header-align="center"
                             align="center"
                             width="50"></el-table-column>
            <el-table-column type="index"
                             width="50"
                             label="序号"></el-table-column>
            <el-table-column v-if="showColumns[0].show"
                             prop="documentName"
                             header-align="center"
                             width="155"
                             align="center"
                             label="单据名称"
                             :show-overflow-tooltip="true"><template slot-scope="scope">
                <div class="number-reply"
                     @click="addOrUpdateHandle(scope.row.id, 'watch')">
                  {{ scope.row.documentName }}
                </div>
              </template></el-table-column>
            <el-table-column v-if="showColumns[1].show"
                             prop="documentPrefixCode"
                             header-align="center"
                             width="120"
                             align="center"
                             label="单据前缀代码"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[2].show"
                             prop="documentCode"
                             header-align="center"
                             width="120"
                             align="center"
                             label="单据编号代码"
                             :show-overflow-tooltip="true"></el-table-column>

            <el-table-column v-if="showColumns[3].show"
                             prop="initialValue"
                             header-align="center"
                             align="center"
                             label="初始值"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[4].show"
                             prop="currentValue"
                             header-align="center"
                             align="center"
                             label="当前值"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[5].show"
                             prop="dateType"
                             header-align="center"
                             align="center"
                             label="日期类型"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[6].show"
                             prop="dateExample"
                             header-align="center"
                             width="120"
                             align="center"
                             label="日期示例"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[7].show"
                             prop="documentNumLength"
                             header-align="center"
                             width="120"
                             align="center"
                             label="单据流水号长度"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[8].show"
                             prop="connector"
                             header-align="center"
                             width="120"
                             align="center"
                             label="子项号连接符"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[9].show"
                             prop="subNumLength"
                             header-align="center"
                             width="120"
                             align="center"
                             label="子项流水号长度"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[10].show"
                             prop="remark"
                             header-align="center"
                             width="120"
                             align="center"
                             label="备注"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[11].show"
                             prop="createTime"
                             header-align="center"
                             width="120"
                             align="center"
                             label="创建时间"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[12].show"
                             prop="createBy"
                             header-align="center"
                             width="120"
                             align="center"
                             label="创建人"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[13].show"
                             prop="updateTime"
                             header-align="center"
                             width="120"
                             align="center"
                             label="更新时间"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column v-if="showColumns[14].show"
                             prop="updateBy"
                             header-align="center"
                             width="120"
                             align="center"
                             label="更新人"
                             :show-overflow-tooltip="true"></el-table-column>
            <el-table-column header-align="center"
                             align="center"
                             width="220"
                             label="操作"
                             fixed="right">
              <template slot-scope="scope">
                <!-- <el-button type="text"
                         size="middle"
                         @click="addOrUpdateHandle(scope.row.id, 'watch')">查看</el-button> -->
                <!-- <el-button type="text"
                           size="middle"
                           @click="addOrUpdateHandle(scope.row.id, 'edit')"
                           v-permission="['DOCUMENT_UPDATE_BUTTON']">修改</el-button>
                <el-button class="green"
                           type="text"
                           size="middle"
                           @click="addOrUpdateHandle(scope.row.id, 'copy')"
                           v-permission="['DOCUMENT_COPY_BUTTON']">复制</el-button> -->
                <!--            <el-button type="text" size="middle" @click="enableHandle(scope.row.id, 2)">禁用</el-button>-->
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="addOrUpdateHandle(scope.row.id, 'edit')"
                  v-hasPermi="['system:documentrule:edit']"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="addOrUpdateHandle(scope.row.id, 'copy')"
                  v-hasPermi="['system:documentrule:remove']"
                >复制</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="listQuery.pageNo"
            :limit.sync="listQuery.pageSize"
            @pagination="getDataList"
          />
          <!-- <dt-pagination v-show="total > 0"
                         :total="total"
                         :page.sync="listQuery.pageNo"
                         :limit.sync="listQuery.pageSize"
                         @pagination="getDataList" /> -->

        </div>

      </div>
      <add-or-update v-if="addOrUpdateVisible"
                     ref="addOrUpdate"
                     @changeVisible="changeVisible"
                     @refreshDataList="getDataList"
                     :watch-edit="watchEdit"></add-or-update>
    </div>

  </div>
</template>

<script>
// 这里需要引用才可以生效喔
import AddOrUpdate from './add-or-update.vue'
import documentApi from '@/api/system/documentrule.js'

export default {
  name: 'Document',
  data () {
    return {
      tableVisable: true,
      // 显隐表格
      isShowTable: true,
      // 列显隐数组
      showColumns: [
        { prop: 'documentPrefixCode', label: '单据前缀代码', show: true },
        { prop: 'documentCode', label: '单据编号代码', show: true },
        { prop: 'documentName', label: '单据名称', show: true },
        { prop: 'initialValue', label: '初始值', show: true },
        { prop: 'currentValue', label: '当前值', show: true },
        { prop: 'dateType', label: '日期类型', show: true },
        { prop: 'dateExample', label: '日期示例', show: true },
        { prop: 'documentNumLength', label: '单据流水号长度', show: true },
        { prop: 'connector', label: '子项号连接符', show: true },
        { prop: 'subNumLength', label: '子项流水号长度', show: true },
        { prop: 'remark', label: '备注', show: true },
        { prop: 'createTime', label: '创建时间', show: true },
        { prop: 'createBy', label: '创建人', show: true },
        { prop: 'updateTime', label: '更新时间', show: true },
        { prop: 'updateBy', label: '更新人', show: true }

      ],
      innerHeight: 200,
      searchShow: false,
      advanced: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        documentPrefixCode: '',
        documentCode: '',
        documentName: '',
      },
      conditionList: [],
      dataList: [],
      total: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      // fileUploadVisible: false,
      // uploadLoading: false,
      // handleImportTemplate: rateApi.downloadTemplate,

      exportLoading: false,
      delLoading: false,
      watchEdit: 'add'

    }
  },
  components: {
    AddOrUpdate
  },
  mounted () {
    window.addEventListener('keyup', this.keyClick);
  },
  beforeDestroy () {
    window.removeEventListener('keyup', this.keyClick);
  },
  created () {
    this.getDataList()
    this.getConditionList()
  },
  activated () {
    this.getDataList()
    this.getConditionList()
  },
  methods: {
    keyClick (event) {
      if (event.keyCode === 13) {
        if (this.tableVisable === true) {
          this.getDataList()
        }
      }
    },
    changeVisible () {
      this.addOrUpdateVisible = false// 跳转新增页面

    },
    changeadvanced () {
      this.advanced = !this.advanced;
    },
    resetDataList () {
      this.$refs.listQueryRef.resetFields('listQuery')
      this.getDataList()
    },
    // 获取查询列表
    getConditionList () {

      this.dataListLoading = true
      documentApi.getSelectCondition({}).then((res) => {
        // console.log(res)
        if (res) {
          this.conditionList = res.data
        } else {
          this.conditionList = []
        }
        this.dataListLoading = false
      }).catch(e => {
        this.dataListLoading = false
      })
    },
    // 获取数据列表
    getDataList () {
      this.tableVisable = true
      this.changeVisible()
      this.dataListSelections = []
      this.dataListLoading = true
      documentApi.fetchList(this.listQuery).then((res) => {
        // console.log(res)
        const data = res
        if (res && data) {
          this.dataList = data.rows
          this.total = data.total
        } else {
          this.dataList = []
          this.total = 0
        }
        this.dataListLoading = false
      }).catch(e => {
        this.dataListLoading = false
      })
    },
    // 多选
    selectionChangeHandle (val) {
      // console.log(val)
      this.dataListSelections = val
    },
    editCopy () {
      if (!this.dataListSelections || this.dataListSelections.length != 1) {
        this.$message.warning('请勾选一条数据')
        return false
      }
      this.watchEdit = 'copy'
      let id = this.dataListSelections[0].id
      this.addOrUpdateVisible = true
      this.tableVisable = false
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    editSelect () {
      // console.log(this.dataListSelections, 'fffff')
      if (!this.dataListSelections || this.dataListSelections.length != 1) {
        this.$message.warning('请勾选一条数据')
        return false
      }
      this.watchEdit = 'edit'
      let id = this.dataListSelections[0].id
      this.addOrUpdateVisible = true
      this.tableVisable = false
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (id, watchOrEdit) {
      if (watchOrEdit) {
        this.watchEdit = watchOrEdit
      } else {
        if (watchOrEdit === 'copy') {
          this.watchEdit = 'copy'
        } else if (watchOrEdit === 'edit') {
          this.watchEdit = 'edit'
        } else {
          this.watchEdit = 'add'
        }
      }
      this.addOrUpdateVisible = true
      this.tableVisable = false
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // handleImport() {
    //   this.fileUploadVisible = true
    // },

    enableHandle (id, status) {
      if (!id && this.dataListSelections.length < 1) {
        this.$message.warning('请勾选数据')
        return false
      }
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定进行${status === 1 ? '启用' : '禁用'}操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        documentApi.enableDisable({ ids: ids.join(','), status: status }).then((res) => {
          const data = res.data
          if (res) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    // 删除
    deleteHandle (id, name) {
      if (!id && this.dataListSelections.length < 1) {
        this.$message.warning('请勾选数据')
        return false
      }
      this.delLoading = true
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.id
      })
      this.$confirm(`确定${id ? '对' + name : ''}进行${id ? '删除' : '批量删除'}操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        documentApi.delete({ ids: ids.join(',') }).then((res) => {
          const data = res.data
          if (res) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 500,
              onClose: () => {
                this.getDataList()
              }
            })
          } else {
            this.$message.error(res.message)
          }
          this.delLoading = false
        }).catch((e) => {
          this.delLoading = false
        })
      }).catch((e) => {
        this.delLoading = false
      })
    }
  }
}


</script>
<!--// 引入page.less-->
<style lang="less" scoped>

.el-form-item {
  margin-bottom: 8px;
}

.page-inner-open {
  min-height: calc(100vh - 368px);
  max-height: calc(100vh - 368px);
  background-color: #fff;
  margin-top: 16px;
  padding: 16px;
  padding-top: 12px;
  border-radius: 4px;

  .el-table {
    min-height: calc(100vh - 490px);
    max-height: calc(100vh - 490px);
    overflow: auto;
  }
}

.page-inner {
  min-height: calc(100vh - 219px) !important;
  max-height: calc(100vh - 219px) !important;
  background-color: #fff;
  margin-top: 16px;
  padding: 16px;
  padding-top: 12px;
  border-radius: 4px;

  .el-table {
    min-height: calc(100vh - 345px) !important;
    max-height: calc(100vh - 345px) !important;
    overflow: auto;
  }
}

.component {
  width: 100%;
}
</style>
